<template>
	<div class="container">
		<JxNavbar navType='title' title='绑定高校' />

		<div class="jx-cell">
			<div class="jx-cell-title">请选择对应高校</div>
			<div class="jx-cell-box">
				<div class="cell-item " @click="openSchoolPopup">
					<text class="label">绑定高校</text>
					<div class="right">
						<text>{{formData.school.name}}</text>
						<i class="iconfont icon-right"></i>
					</div>
				</div>

				<div class="cell-item uv-border-top" v-if="formData.school.name" @click="openCampusPopup">
					<text class="label">对应校区</text>
					<div class="right">
						<text>{{formData.campus.name}}</text>
						<i class="iconfont icon-right"></i>
					</div>
				</div>
			</div>
		</div>

		<div class="submit-btn">
			<button class="uv-reset-button" :class="{'not-active': validateFormData['length']}" @click="onSubmit">确认绑定</button>
		</div>

		<schoolPopupVue ref="schoolPopupRef" :schoolList='schoolList' @confirm="confirmSchool" />

		<uv-picker ref="pickerRef" :columns="campusList" keyName="name" @confirm="confirmCampus"></uv-picker>

		<uv-modal ref="modalRef" title="提示" width="600rpx" :closeOnClickOverlay='false' showCancelButton @confirm="confirmBind">
			<p>学校一经绑定不可修改，确认绑定该学校吗?</p>
		</uv-modal>
	</div>
</template>

<script setup>
	import { ref, computed, watch } from 'vue';
	import users from '@/api/users/index.js'
	import tools from '@/utils/tools/index.js'
	import schools from '@/api/schools/index.js'
	import { useUserStore } from '@/store/user.js'
	import JxNavbar from '@/components/navbar/index.vue'
	import { useGeneralStore } from '@/store/general.js'
	import schoolPopupVue from './components/school-popup.vue';

	const test = uni.$uv.test;
	const userStore = useUserStore();
	const generalStore = useGeneralStore();

	const schoolList = computed(() => generalStore.schoolList);

	const modalRef = ref(null);
	const pickerRef = ref(null);
	const schoolPopupRef = ref(null);

	const campusList = ref([]);
	const formData = ref({ school: {}, campus: {} })

	const validateFormData = computed(() => {
		const errors = [];
		const { school, campus } = formData.value;
		!school['_id'] && errors.push('请选择高校');
		!campus['_id'] && errors.push('请选择校区');
		return errors;
	})

	async function onSubmit() {
		if (validateFormData['value']['length']) {
			const validateText = validateFormData.value.join('/');
			return tools.toast({ title: validateText })
		}

		if (userStore.bindSchool) {
			return tools.toast({ title: '已绑定学校不可修改，如有疑问请联系客服' })
		}

		modalRef.value.open();
	}

	async function confirmBind() {
		tools.loading();
		const { school, campus } = formData.value;
		const response = await users.updateSchool({
			name: school.name,
			school_id: school['_id'],
			campusName: campus.name,
			campus_id: campus['_id'],
		});
		uni.hideLoading();
		if (response['code'] === 200) {
			userStore.init();
			tools.toast({
				icon: 'success',
				title: '绑定成功',
				fun: () => {
					uni.navigateBack({ delta: 1 })
				}
			})
		}
	}

	function openSchoolPopup() {
		schoolPopupRef.value.open();
	}

	function openCampusPopup() {
		pickerRef.value.open();
	}

	function confirmSchool(val) {
		formData.value.school = val;
		formData.value.campus = {};
		campusList.value = [val['children'] || []];
	}

	function confirmCampus({ value }) {
		formData.value.campus = value[0]
	}

	function initSchool(school) {
		if (test.object(school) && school['name']) {
			formData.value = {
				school: {
					_id: school.school_id,
					name: school.name,
				},
				campus: {
					_id: school.campus_id,
					name: school.campusName,
				}
			}
		}
	}

	watch(
		() => userStore.userInfo,
		(newVal) => {
			if (test.object(newVal) && newVal['school']) {
				initSchool(newVal['school']);
			}
		}, { immediate: true },
	)
</script>

<style lang="scss" scoped>
	.container {
		background: $uv-bg-color;

		.submit-btn {
			width: 80%;
			margin: 0 auto;
			margin-top: 60rpx;

			button {
				height: 85rpx;
				line-height: 85rpx;
				border-radius: 36px;
				background: $uv-primary;
				color: #fff;
				font-size: 32rpx;
			}
		}
	}
</style>